<template>
	<div class="theme">
		<van-nav-bar title="修改登录密码" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div style="padding-top: 10px;">
					<van-field v-model="password" placeholder="请输入旧密码" type="password" maxlength="20" />
					<van-field v-model="newPassword" placeholder="请输入新密码" type="password" maxlength="20" />
					<van-field v-model="newPassword2" placeholder="确认新密码" type="password" maxlength="20" />
				</div>
				<div style="padding-top: 30px;padding-left: 20px;padding-right: 20px;" align="center">
					<van-button round type="info" style="width: 100%;" @click="sure" :loading="loading">确定</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	export default {
		name: 'UpdatePwd',
		components: {},
		props: {},
		data() {
			return {
				loading: false,
				password: '',
				newPassword: '',
				newPassword2: ''
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onClickLeft() {
				this.$router.push({
					path: '/Setting'
				});
			},
			sure() {
				if(!this.password) {
					this.$toast('旧密码不能为空');
					return false;
				} else {
					if(this.password.length < 6 || this.password.length > 20) {
						this.$toast('旧密码长度在6到20位之间');
						return false;
					}
				}
				if(!this.newPassword) {
					this.$toast('新密码不能为空');
					return false;
				} else {
					if(this.newPassword.length < 6 || this.newPassword.length > 20) {
						this.$toast('新密码长度在6到20位之间');
						return false;
					}
				}
				if(!this.newPassword2) {
					this.$toast('确认新密码不能为空');
					return false;
				} else {
					if(this.newPassword2.length < 6 || this.newPassword2.length > 20) {
						this.$toast('确认新密码长度在6到20位之间');
						return false;
					}
				}
				if(this.newPassword != this.newPassword2) {
					this.$toast('新密码输入不一致');
					return false;
				}
				this.loading = true;
				base.upPassword({
					'oldpassword': this.password,
					'password': this.newPassword,
					'confirmPassWord': this.newPassword2
				}).then(res => {
					if(res.code == 200) {
						this.$router.push({
							path: '/Login'
						});
					}
					this.$toast(res.msg);
					this.loading = false;
				})
			}
		},
		created() {},
		mounted() {},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	/deep/ .van-nav-bar {
		background-color: #43add5;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	/deep/ .van-nav-bar__title {
		color: white;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	/deep/ .van-nav-bar__text {
		color: white;
	}
	
	.overlay {
		background: #f2f4f5 !important;
	}
	
	/deep/ input::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: #e4e4e4 !important;
		font-size: 12px;
	}
	
	/deep/ input::-moz-placeholder {
		/* Firefox 19+ */
		color: #e4e4e4 !important;
		font-size: 12px;
	}
	
	/deep/ input:-ms-input-placeholder {
		/* IE 10+ */
		color: #e4e4e4 !important;
		font-size: 12px;
	}
	
	/deep/ input:-moz-placeholder {
		/* Firefox 18- */
		color: #e4e4e4 !important;
		font-size: 12px;
	}
	
	/deep/ .van-button--info {
		background-color: #43add5;
    	border: 1px solid #43add5;
	}
	
	/deep/ .van-button {
		height: 40px;
		line-height: 38px;
	}
</style>